<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="DIV">

    <p id="one">姓名：<input type="text" value=""></p>
    <p id="two">年龄：<input type="text" value=""></p>
    <p id="there">电话：<input type="text" value=""></p>
    <p id="forn">住址：<input type="text" value=""></p>
    <button onclick="que()">确认</button>

    <script>
        var text = document.getElementById("DIV");
        var jie=text.childNodes;
        console.log("boby的子元素节点共有"+jie.length+"个");
        // for (const key in jie) {
           
        //         console.log("第"+key+"个节点名称是："+jie[key].nodeName);
                
        //     }
        

        for(var i=0;i<jie.length;i++){
            console.log("第"+i+"个节点名称是："+jie[i].nodeName);
        }


        
    //第二题
    //创建P标签
     var p = document.createElement("p");
     //向P标签添加id值
     p.setAttribute("id","sex");

    var p1 = document.getElementsByClassName("p1");
     //创建文本内容
     var text1 = document.createTextNode("性别：");
     //创建input标签
	 var input1 = document.createElement("input");
     	 //吧文本添加到新的P标签中
          p.append(text1);
     //吧创建的P标签插入到第二个input标签中
      text.insertBefore(p,text.children[1]);

     //吧新的input标签添加到P标签里面
      p.insertBefore(input1,p1.firstchild);


     //第三题
    var input2 = document.getElementsByTagName('input');
   function  que() {
        alert("姓名："+input2[0].value+"年龄是："+input2[2].value+"ta的电话是："+input2[3].value+"地址是："+input2[4].value);

    }
    


    //第四题
    var input3 = document.getElementById("forn").getElementsByTagName("input")[0];
    input3.style.height="100px";
    input3.style.width="200px";
    input3.style.border="2px solid red";
    </script>
</body>
</html>